<template>
  <div class="header">
    <div class="content-wrapper">
      <div class="avatar">
        <img :src="seller.avatar" alt="" width="64" height="64">
      </div>
      <div class="content">
        <div class="tltle">
          <span class="brand"></span>
          <span class="name">{{seller.name}}</span>
        </div>
        <div class="descrption">
          {{seller.description}}/{{seller.deliveryTime}}分钟送达
        </div>
        <div class="support" v-if="seller.supports">
          <span class="icon" :class="classMap[seller.supports[0].type]"></span>
          <span class="text">{{seller.supports[0].description}}</span>
        </div>
      </div>
      <div v-if="seller.supports" class="support-count" @click="showDetail">
          <span class="count">{{seller.supports.length}}个</span>
           <i class="icon-keyboard_arrow_right"></i>
      </div>
    </div>
    <div @click="showDetail" class="bulletin-wrapper">
        <span class="bulletin-title"></span>
        <span class="bulletin-text">{{seller.bulletin}}</span>
        <i class="icon-keyboard_arrow_right"></i>
    </div>
    <div class="background">
      <img :src="seller.avatar" alt="" >
    </div>

    <transition name="fade">

    <div class="detail" v-show="detailShow">
      <div class="detail-wrapper clearfix">
        <div class="detail-content">
          <h1 class="name">{{seller.name}}</h1>
          <div class="star-wrapper">
            <v-star :size="48" :score="seller.score"></v-star>
          </div>
          <div class="title">
            <div class="line"></div>
            <div class="text">优惠信息</div>
            <div class="line"></div>
          </div>
          <ul class="support"  v-if="seller.supports">
            <li v-for="(item,index) in seller.supports" class="support-item">
              <span class="icon" :class="classMap[seller.supports[index].type]"></span>
              <span class="text">{{seller.supports[index].description}}</span>
            </li>
          </ul>
          <div class="title">
            <div class="line"></div>
            <div class="text">商家公告</div>
            <div class="line"></div>
          </div>
          <div class="support-content">
            <div class="text">{{seller.bulletin}}</div>
          </div>
        </div>

      </div>
      <div class="detail-close" >
        <div class="icon-close" @click="closeDetail"></div>
      </div>
    </div>

    </transition>
  </div>
</template>


<script>
  import star from '../star/star.vue'
  export default{
  props:{
    seller:{
      type:Object
    }
  },
    data(){
      return{
        detailShow:false
      }
    },
    methods:{
      showDetail(){
          this.detailShow=true
      },
      closeDetail(){
        this.detailShow=false
      }
    },
    created() {
      this.classMap=['decrease','discount','special','invoice','guarantee']
    },
    components:{
        "v-star":star
    }

  }

</script>

<style lang="scss">
.header{
  position: relative;
  color: #fff;
  overflow: hidden;

  .content-wrapper{
    position:relative;
    padding:24px 12px 18px 24px;
    font-size: 0;
    .avatar{
      display: inline-block;
      img{
        border-radius: 2px;
      }

    }
    .content{
      margin-left: 16px;
      display: inline-block;
      font-size: 14px;
      .tltle{
       margin: 2px 0 8px 0;
        .brand{
          vertical-align: top;
          display: inline-block;
          width: 30px;
          height: 18px;
          background-image: url(brand@2x.png);
          background-size:30px 18px;
          background-repeat:no-repeat;

        }
          .name{
            margin-left: 16px;
            font-size: 16px;
            line-height: 18px;
            font-weight:bold;
          }
      }
      .descrption{
        font-size: 12px;
        line-height: 12px;
        font-weight:200;
        margin-bottom: 10px;
      }
      .support{
        .icon{
          vertical-align: top;
          display: inline-block;
          width: 12px;
          height: 12px;
          background-size:12px 12px;
          background-repeat: no-repeat;
          &.decrease{
             background-image: url(decrease_1@2x.png);
           }
           &.discount{
              background-image: url(discount_1@2x.png);
            }
            &.guarantee{
               background-image: url(guarantee_1@2x.png);
             }
             &.invoice{
                background-image: url(invoice_1@2x.png);
              }
              &.special{
                 background-image: url(special_1@2x.png);
               }


        }
        .text{
          font-size: 12px;
          line-height: 10px;
        }
      }
    }
    .support-count{
      position: absolute;
      right: 12px;
      bottom: 18px;
      padding:0 8px;
      height: 24px;
      line-height: 24px;
      border-radius: 14px;
      background-color: rgba(0,0,0,0.2);
      .count{
        vertical-align: top;
        font-size: 12px;
        display: inline-block;
        text-align: center;
      }
      .icon-keyboard_arrow_right{
        display: inline-block;
        font-size: 12px;
        line-height: 24px;
        margin-left:2px;
      }

    }
  }
  .bulletin-wrapper{
    position: relative;
    background-color: rgba(7,17,27,.2);
    height: 28px;
    line-height: 28px;
    padding:0 28px 0 12px ;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    .bulletin-title{
      vertical-align: middle;
      display: inline-block;
      width: 22px;
      height: 12px;
      background-image: url(bulletin@2x.png);
      background-size:22px 12px;
      background-repeat:no-repeat;
    }
    .bulletin-text{
      font-size: 12px;
      font-weight:200;
      margin: 0 4px;
    }
    .icon-keyboard_arrow_right{
      position: absolute;
      top: 8px;
      right: 10px;
      display: inline-block;
      font-size: 12px;
    }
  }
  .background{
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-color:rgba(7,17,27,.5);
    filter: blur(10px);
    img{
      width: 100%;
      height: 100%;
    }
  }
.detail{
  position: fixed;
  top: 0;
  left: 0;
  z-index:99;
  width: 100%;
  height: 100%;
  overflow: auto;
  /*transition:all 0.5s;*/
  background-color: rgba(7,17,27,0.8);
  backdrop-filter:blur(10px);

  &.fade-enter-active, &.fade-leave-active {
  transition: all .5s
}
  &.fade-enter, &.fade-leave-to{
  opacity: 0;
  background-color: rgba(7,17,27,0);
}

  .detail-wrapper{
    width: 100%;
    min-height: 100%;
    .detail-content{
      width: 100%;

      margin-top: 64px;
      padding-bottom:68px;

      .name{
        text-align: center;
        font-size: 16px;
        font-weight:700;
      }
    }
    .title{
      display: flex;
      width: 80%;
      /*background-color: red;*/
      margin: 28px auto 24px auto;
      .line{
        flex: 1;
        position: relative;
        top: -6px;
        /*left: 0;*/
        border-bottom:1px solid rgba(255,255,255,0.2);
      }
      .text{
        padding:0 12px;
        font-size: 14px;
        font-weight:700;
      }
    }
    .support{
      width: 80%;
      margin:0 auto;
      margin-top: 24px;
      .support-item{
        padding:0 12px;
        margin-bottom: 12px;
        font-size:0;
        .icon{
          display: inline-block;
          width: 16px;
          height: 16px;
          vertical-align: top;
          margin-right: 6px;
          background-size: 16px 16px;
            &.decrease{
              background-image: url(decrease_2@2x.png);
            }
            &.discount{
              background-image: url(discount_2@2x.png);
            }
            &.guarantee{
              background-image: url(guarantee_2@2x.png);
            }
            &.invoice{
              background-image: url(invoice_2@2x.png);
            }
            &.special{
              background-image: url(special_2@2x.png);
            }
        }
        .text{
          font-size:12px;
          line-height:16px;
          font-weight:200;
        }
      }

    }
.support-content{
  width: 80%;
  margin:0 auto;
  font-size: 12px;
  font-weight:200;
  line-height: 24px;
  .text{
    padding: 0 12px;
  }
}
  }
  .detail-close{
    position: relative;
    width: 32px;
    height: 32px;
    margin: -64px auto;
    font-size: 32px;

  }

}
}

</style>
